<template>
  <div class="mui-content mh-container pb pd">
    <mh-header headName="发布活动"> </mh-header>
    <div class="mh-form">
      <ul class="mui-table-view">
        <li class="mh-form-item" @tap="selectSize">
          <label>系统费用分配方式</label>
          <div class="mh-input-row">
            <input type="text" placeholder="请选择分配方式" readonly v-model='cost_type'>
          </div>
        </li>
        <li class="mh-form-item" @tap="selectType">
          <label>活动类型</label>
          <div class="mh-input-row">
            <input type="text" placeholder="请选择产品类别" readonly v-model='type'>
          </div>
        </li>
        <li class="mh-form-item">
          <label>活动召集人</label>
          <div class="mh-input-row">
            <input type="text" readonly v-model='convenor'>
          </div>
        </li>
        <li class="mh-form-item sanm-item">
          <label>宣传封面</label>
          <div class="mh-input-row">
            <input type="hidden" v-model='image'>
            <div class="input-img">
              <input type="file">
              <span>+</span>
            </div>
          </div>
        </li>
        <li class="mh-form-item">
          <label>活动主题</label>
          <div class="mh-input-row">
            <input type="text" placeholder="请输入活动主题" v-model='theme'>
          </div>
        </li>
        <li class="mh-form-item">
          <label>限定人数</label>
          <div class="mh-input-row new-row">
            男 <input type="text" v-model='limit_boy'>
            女 <input type="text" v-model='limit_girl'>
          </div>
        </li>
        <li class="mh-form-item">
          <label>最多超额</label>
          <div class="mh-input-row">
            <input type="text" v-model='excess'>
          </div>
        </li>
        <li class="mh-form-item">
          <label>志愿者</label>
          <div class="mh-input-row">
            <input type="text" v-model='volunteer'>
          </div>
        </li>
        <li class="mh-form-item">
          <label>超额价格</label>
          <div class="mh-input-row new-row">
            ￥<input type="text" v-model='excess_price'>
          </div>
        </li>
        <li class="mh-form-item">
          <label>活动经费(人)</label>
          <div class="mh-input-row new-row">
            ￥<input type="text" v-model='funds'>
          </div>
        </li>
        <li class="mh-form-item" @tap="selectTime(1)">
          <label>活动开始时间</label>
          <div class="mh-input-row">
            <input type="text" placeholder="请选择开始时间" readonly v-model='start_time'>
          </div>
        </li>
        <li class="mh-form-item" @tap="selectTime(2)">
          <label>活动结束时间</label>
          <div class="mh-input-row">
            <input type="text" placeholder="请选择结束时间" readonly v-model='end_time'>
          </div>
        </li>
        <li class="mh-form-item" @tap="selectCity(1)">
          <label>活动地点</label>
          <div class="mh-input-row">
            <input type="text" placeholder="请选择活动地点" readonly v-model='activity_address'>
          </div>
        </li>
        <li class="mh-form-item" @tap="selectCity(2)">
          <label>出发地点</label>
          <div class="mh-input-row">
            <input type="text" placeholder="请选择出发地点" readonly v-model='setout_address'>
          </div>
        </li>
        <li class="mh-form-item" @tap="selectCity(3)">
          <label>目的地</label>
          <div class="mh-input-row">
            <input type="text" placeholder="请选择目的地" readonly v-model='destination'>
          </div>
        </li>
        <li class="mh-form-item">
          <label>入住酒店</label>
          <div class="mh-input-row">
            <input type="text" placeholder="请输入入住酒店" v-model='hotel'>
          </div>
        </li>
        <li>
          <div class="upload bg-w mh-pd">
            <p>插入图片</p>
            <input type="hidden" v-model='illustration'>
            <div class="upload-box">
              <span class="upload-ico">+</span>
            </div>
          </div>
        </li>
        <li>
          <div class="upload bg-w mh-pd">
            <p>活动流程</p>
            <textarea cols="30" rows="18" placeholder="请输入活动流程" v-model='process'></textarea>
          </div>
        </li>
        <li>
          <div class="upload bg-w mh-pd">
            <p>活动风采</p>
            <input type="text" placeholder="请输入标题" v-model='activity_title'>
            <textarea cols="30" rows="18" placeholder="请输入正文" v-model='activity_info'></textarea>
          </div>
        </li>
      </ul>
    </div>

    <div class="fix-btn">
      <button type="button" class="mh-btn mui-btn-block" @tap='submit'>发布</button>
    </div>
  </div>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header';
  import {cityData} from "@/assets/js/city.data-3";
  import {MH_API} from "@/api/api";
  export default {
    name: "re-product",
    components: {
      MhHeader
    },
    data () {
      return {
        sizeList: [
          {text: '1/1000', value: '1'},
          {text: '2/1000', value: '2'}
        ],
        typeList: [
          {text: '旅游', value: '0'},
          {text: '聚餐', value: '1'},
          {text: '狼游', value: '2'},
          {text: '品茶', value: '3'}
        ],
        cost_type: '',
        type: '',
        start_time: '',
        end_time: '',
        convenor: '',
        image: '',
        theme: '',
        limit_boy: '',
        limit_girl: '',
        excess: '',
        volunteer: '',
        excess_price: '',
        funds: '',
        activity_address: '',
        setout_address: '',
        destination: '',
        hotel: '',
        illustration: '',
        process: '',
        activity_title: '',
        activity_info: ''
      }
    },
    methods: {
      submit(){
        if(this.cost_type=='' || this.type=='' || this.theme==''){
          mui.toast('请填写信息');
          return false
        }
        let self = this;
        MH_API.releaseActivity({
          cost_type: self.cost_type,
          type: self.type,
          start_time: self.start_time,
          end_time: self.end_time,
          convenor: self.convenor,
          image: self.image,
          theme: self.theme,
          limit_boy: self.limit_boy,
          limit_girl: self.limit_girl,
          excess: self.excess,
          volunteer: self.volunteer,
          excess_price: self.excess_price,
          funds: self.funds,
          activity_address: self.activity_address,
          setout_address: self.setout_address,
          destination: self.destination,
          hotel: self.hotel,
          illustration: self.illustration,
          process: self.process,
          activity_title: self.activity_title,
          activity_info: self.activity_info
        }).then(res => {
          if (res.status === 200) {
            mui.toast('发布成功');
            setTimeout(function(){
              self.$router.go(-1)
            }, 1500)
          }
          else{
            mui.toast(res.msg);
          }
        })
      },
      selectSize () {
        let self = this;
        let picker = new mui.PopPicker();
        picker.setData(this.sizeList);
        picker.show(function (selectItems) {
          console.log(selectItems[0].text);
          // console.log(selectItems[0].value);
          self.cost_type = selectItems[0].text;
        })
      },
      selectType () {
        let self = this;
        let picker = new mui.PopPicker();
        picker.setData(this.typeList);
        picker.show(function (selectItems) {
          self.type = selectItems[0].text;
        })
      },
      selectTime (type) {
        let self = this;
        let dtPicker = new mui.DtPicker();
        dtPicker.show(function (selectItems) {
          if(type==1){
            self.start_time = selectItems.value;
          }
          else{
            self.end_time = selectItems.value;
          }
        })
      },
      _getParam (obj, param) {
        return obj[param] || '';
      },
      selectCity (type) {
        let self = this;
        let cityPicker = new mui.PopPicker({
          layer: 2
        });
        cityPicker.setData(cityData);
        cityPicker.show(function(items) {
          // self.province = items[0].value;
          // self.city = items[1].value;
          let thisName = `${self._getParam(items[0], 'text')}${self._getParam(items[1], 'text')}`;
          if(type==1){
            self.activity_address = thisName;
          }
          else if(type==2){
            self.setout_address = thisName;
          }
          else if(type==3){
            self.destination = thisName;
          }
        });
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .input-img{ width:5rem;height:5rem;background-color:#eee; overflow:hidden;position:relative;}
  .input-img input{ opacity:0;}
  .input-img span{ position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;line-height:5rem;}
  .mh-form-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 5rem;
    line-height: 5rem;
    padding: 1px 2rem;
    border-bottom: 1px solid #eee;
    color: #666;
    font-size: 1.4rem;
    overflow: hidden;
    &.item-lg {
      height: 6.5rem;
      line-height: 6.5rem;
    }
  }
  .mh-input-row {
    height: 100%;
    &>input {
      height: 5rem;
      margin: 0;
      border: 0;
      text-align: right ;
    }
  }
  .upload {
    padding: 1rem 2rem;
    &>p {
      margin-bottom: 1rem;
      @include sc(1.4rem, #666);
    }
    textarea {height: 6rem;padding: 0;}
  }
  .upload-box {
    position: relative;
    width: 100%;
    height: 11rem;
    background: #eee;
  }
  .upload-ico {
    @include center;
    @include sc(4rem, #dedede);
  }
  .fix-btn {
    position: fixed;
    width: 100%;
    height: 5rem;
    left: 0;
    right: 0;
    bottom: 0;
    button {
      width: 100%;
      height: 100%;
      border-radius: 0;
    }
  }
  .sanm-item{ height:auto; display:flex; justify-content:space-between;padding:1rem 2rem;}
  .new-row input{ width:5rem;}
</style>
